<template>
  <div>
    <div class="data-num">
      <i class="el-icon-info"></i>
      <span>数据一共 {{ counts }} 条</span>
    </div>
    <el-table :data="questionList" style="width: 100%">
      <el-table-column width="130" label="试题编号" prop="number">
      </el-table-column>
      <el-table-column width="130" label="学科" prop="subject">
      </el-table-column>
      <el-table-column width="130" label="目录" prop="catalog">
      </el-table-column>
      <el-table-column width="130" label="题型">
        <template slot-scope="scope">
          <div>{{ scope.row.questionType | transitionType }}</div>
        </template>
      </el-table-column>
      <el-table-column width="200" label="题干" prop="question">
        <template slot-scope="scope">
          <div v-html="scope.row.question"></div>
        </template>
      </el-table-column>
      <el-table-column width="180" label="录入时间">
        <template slot-scope="scope">
          <span>{{ scope.row.addDate | formatTime }}</span>
        </template>
      </el-table-column>
      <el-table-column width="130" label="难度">
        <template slot-scope="scope">
          <span>{{ scope.row.difficulty | transitionDifficulty }}</span>
        </template>
      </el-table-column>
      <el-table-column width="130" label="录入人" prop="creator">
      </el-table-column>
      <el-table-column width="130" label="审核状态">
        <template slot-scope="scope">
          <span>{{ scope.row.chkState | transitionChkState }}</span>
        </template>
      </el-table-column>
      <el-table-column width="130" label="审核意见" prop="chkRemarks">
      </el-table-column>
      <el-table-column width="130" label="审核人" prop="chkUser">
      </el-table-column>
      <el-table-column width="130" label="发布状态">
        <template slot-scope="scope">
          <span>{{ scope.row.publishState | transitionPublishState }}</span>
        </template>
      </el-table-column>
      <el-table-column width="190" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="preview(scope.row.id)"
            >预览</el-button
          >
          <el-button
            type="text"
            :disabled="scope.row.chkState === 1||  scope.row.chkState === 2  ? true : false"
            size="small"
            @click="showCheck(scope.row.id)"
            >审核</el-button
          >
          <el-button
            type="text"
            :disabled="scope.row.publishState == 1 ? true : false"
            size="small"
            @click="$router.push(`/questions/new?id=${scope.row.id}`)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="triggerRacking(scope.row)"
          >
            {{ scope.row.publishState === 1 ? "下架" : "上架" }}
          </el-button>

          <el-button
            type="text"
            :disabled="scope.row.publishState == 1 ? true : false"
            size="small"
            @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog title="题目审核" :visible.sync="showDialog" @close='closeDialog' width="23%">
      <el-form >
        <el-form-item>
          <el-radio v-model="radio" label="1">通过</el-radio>
          <el-radio v-model="radio" label="2">拒绝</el-radio>
        </el-form-item>

        <el-form-item>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核意见"
            v-model="textarea"
            ref="textarea"
          >
          </el-input>
        </el-form-item>

        <el-form-item style="margin-left:245px;margin-top:50px;" >

          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="check">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 预览弹框 -->
    <el-dialog
      title="题目预览"
      :before-close="handleClose"
      :visible.sync="previewDialog"
      width="50%"
    >
      <div class="content">
        <el-row :gutter="20" class="row" style="padding-bottom: 5px">
          <el-col :span="5"
            >【题型】:{{ list.questionType | transitionType }}
          </el-col>
          <el-col :span="5">【编号】: {{ list.id }} </el-col>
          <el-col :span="5"
            >【难度】: {{ list.difficulty | transitionDifficulty }}
          </el-col>
          <el-col :span="5">【标签】: {{ list.tags }} </el-col>
          <el-col :span="5">【学科】: {{ list.subjectName }} </el-col>
          <el-col :span="5">【目录】: {{ list.directoryName }} </el-col>
          <el-col :span="5">【方向】: {{ list.direction }} </el-col>
        </el-row>
        <div class="question-stem">
          <div>【题干】:</div>
          <div style="color: blue" v-html="list.question"></div>
          <div>
            <div v-if="list.questionType == '1' || list.questionType == '2'">
              {{ list.questionType | transitionType }}题
              选项：（以下选中的选项为正确答案）
            </div>

            <div>
              <div v-for="item in list.options" :key="item.id">
                <el-radio
                  class="radio"
                  v-if="list.questionType == '1'"
                  v-model="item.isRight"
                  :label="1"
                  >{{ item.title }}</el-radio
                >

                <el-checkbox
                  v-if="list.questionType == '2'"
                  :value="item.isRight ? true : false"
                  >{{ item.title }}</el-checkbox
                >
              </div>
            </div>
          </div>
        </div>
        <div class="answer">
          <span>【参考答案】</span>
          <el-button type="danger" size="small" @click="video"
            >视频答案解析</el-button
          >
          <div v-show="showVideo">
            <video
              :src="list.videoURL"
              width="400"
              height="300"
              controls
              autoplay
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </div>
        <div class="answer">
          【答案解析】: <span v-html="list.answer"></span>
        </div>
        <div class="topic">【题目备注】: {{ list.remarks }}</div>
      </div>
      <span style="margin-left: 730px">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  detail,
  choiceCheck,
  choicePublish,
  choiceAdd
} from '@/api/hmmm/questions.js'
import {
  questionType,
  difficulty,
  chkType,
  publishType
} from '@/api/hmmm/constants.js'

export default {
  name: 'questions-table',
  props: {
    questionList: {
      type: Array,
      required: true
    },
    counts: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  },
  created () {},
  components: {},
  filters: {
    // 过滤题型
    transitionType: function (value) {
      const questionTypeList = questionType.filter(
        (item) => item.value === value
      )
      return questionTypeList.map((item) => item.label)[0]
    },
    // 格式化时间
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:MM:ss')
    },
    // 格式化难度
    transitionDifficulty: function (value) {
      const difficultyList = difficulty.filter((item) => item.value === value)
      return difficultyList.map((item) => item.label)[0]
    },
    // 格式化审核状态
    transitionChkState: function (value) {
      const chkStateList = chkType.filter((item) => item.value === value)
      return chkStateList.map((item) => item.label)[0]
    },
    // 格式化发布状态
    transitionPublishState: function (value) {
      const PublishStateList = publishType.filter(
        (item) => item.value === value
      )
      return PublishStateList.map((item) => item.label)[0]
    }
  },
  computed: {},
  data () {
    return {
      showDialog: false, // 弹框显示
      previewDialog: false, // 预览弹框
      textarea: '', // 文本域
      radio: '1', // 单选
      id: null, // 第几行id
      list: '', // 数据列表
      showVideo: false // 视频展示
    }
  },
  methods: {
    // 审核
    async check () {
      if (this.$refs.textarea.value === '') { return this.$message.warning('请输入审核意见') }
      await choiceCheck({
        id: this.id,
        chkState: Number(this.radio),
        chkRemarks: this.textarea
      })

      this.$emit('render', this.name)
      this.showDialog = false
      this.$message.success('操作成功')
    },
    // 显示 审核弹框
    showCheck (id) {
      this.id = id
      this.showDialog = true
    },
    closeDialog () {
      this.textarea = ''
      this.radio = '1'
    },
    // 显示 预览弹框
    async preview (id) {
      const res = await detail({ id })
      this.list = res.data
      this.previewDialog = true
    },
    // 关闭 预览弹框
    handleClose (done) {
      this.previewDialog = false
      this.showVideo = false
    },
    video () {
      this.showVideo = true
    },
    // 切换上下架
    async triggerRacking (row) {
      const res = await this.$confirm('您确认上架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      const data = {
        id: row.id,
        publishState: Number(!row.publishState)
      }
      if (res === 'confirm') {
        await choicePublish(data)
        this.$emit('render', this.name)
        row.publishState
          ? this.$message.success('下架成功')
          : this.$message.success('上架成功')
      }
    },
    // 删除
    async del (row) {
      const res = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      const data = {
        id: row.id,
        choiceState: 0
      }

      if (res === 'confirm') {
        await choiceAdd(data)
        this.$emit('changePage')
        this.$emit('render', this.name)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }
    }
  }
}
</script>

<style scoped>
.data-num {
  width: 100%;
  padding: 8px 16px;
  margin-bottom: 15px;
  line-height: 18px;
  display: flex;
  align-items: center;
  background-color: #f4f4f5;
  color: #909399;
  border-radius: 4px;
}

.el-icon-info {
  display: block;
  margin-right: 8px;
}

.content {
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  overflow: hidden;
}
.el-col {
  margin: 10px 10px;
}
.question-stem {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  border-top: 2px solid rgba(182, 184, 181, 0.876);
  border-bottom: 2px solid rgba(182, 184, 181, 0.876);
  padding-left: 10px;
}

.radio {
  display: block;
  font-size: 14px;
  padding-left: 10px;
  margin: 6px 6px;
}
.answer {
  line-height: 50px;
  padding-left: 10px;
  border-bottom: 2px solid rgba(182, 184, 181, 0.876);
}

.topic {
  line-height: 50px;
  height: 50px;
  padding-left: 10px;
}
::v-deep .answer p {
  display: inherit;
}
</style>
